<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>播放器页面player | lll</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/myblog/img/favicon.ico">
    <link rel="stylesheet" href="/myblog/css/style.css">
    <meta name="description" content="lll">
    
    <link rel="preload" href="/myblog/assets/css/0.styles.6d34f8a8.css" as="style"><link rel="preload" href="/myblog/assets/js/app.5e430372.js" as="script"><link rel="preload" href="/myblog/assets/js/2.4f8c3bb6.js" as="script"><link rel="preload" href="/myblog/assets/js/21.f5ff3b18.js" as="script"><link rel="prefetch" href="/myblog/assets/js/10.64c8fab5.js"><link rel="prefetch" href="/myblog/assets/js/11.6c6d1141.js"><link rel="prefetch" href="/myblog/assets/js/12.1ce59adc.js"><link rel="prefetch" href="/myblog/assets/js/13.0042d6cf.js"><link rel="prefetch" href="/myblog/assets/js/14.38257b60.js"><link rel="prefetch" href="/myblog/assets/js/15.cfd9bf68.js"><link rel="prefetch" href="/myblog/assets/js/16.4a7d6f31.js"><link rel="prefetch" href="/myblog/assets/js/17.49202f3b.js"><link rel="prefetch" href="/myblog/assets/js/18.9c119c8b.js"><link rel="prefetch" href="/myblog/assets/js/19.8d4a4dec.js"><link rel="prefetch" href="/myblog/assets/js/20.ed64e210.js"><link rel="prefetch" href="/myblog/assets/js/22.de81f692.js"><link rel="prefetch" href="/myblog/assets/js/23.0c58312b.js"><link rel="prefetch" href="/myblog/assets/js/24.94b1183d.js"><link rel="prefetch" href="/myblog/assets/js/25.62df09b8.js"><link rel="prefetch" href="/myblog/assets/js/26.508dea78.js"><link rel="prefetch" href="/myblog/assets/js/27.cbb5edb3.js"><link rel="prefetch" href="/myblog/assets/js/3.f34952a8.js"><link rel="prefetch" href="/myblog/assets/js/4.c092b489.js"><link rel="prefetch" href="/myblog/assets/js/5.42cf8a50.js"><link rel="prefetch" href="/myblog/assets/js/6.adeeeaa0.js"><link rel="prefetch" href="/myblog/assets/js/7.81f6d2e5.js"><link rel="prefetch" href="/myblog/assets/js/8.2cd4d454.js"><link rel="prefetch" href="/myblog/assets/js/9.8155b098.js">
    <link rel="stylesheet" href="/myblog/assets/css/0.styles.6d34f8a8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/myblog/" class="home-link router-link-active"><!----> <span class="site-name">lll</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="微信小程序项目" class="dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow down"></span></button> <button type="button" aria-label="微信小程序项目" class="mobile-dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/guide/" class="nav-link router-link-active">
  wxapp-music
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试宝典" class="dropdown-title"><span class="title">面试宝典</span> <span class="arrow down"></span></button> <button type="button" aria-label="面试宝典" class="mobile-dropdown-title"><span class="title">面试宝典</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/baodian/zero/" class="nav-link">
  初级开发篇
</a></li><li class="dropdown-item"><!----> <a href="/myblog/baodian/high/" class="nav-link">
  中高进阶篇
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具箱" class="dropdown-title"><span class="title">工具箱</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具箱" class="mobile-dropdown-title"><span class="title">工具箱</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          在线编辑
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  图片压缩
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          在线服务
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cloud.tencent.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  腾讯云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          博客指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://juejin.im/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.csdn.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="微信小程序项目" class="dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow down"></span></button> <button type="button" aria-label="微信小程序项目" class="mobile-dropdown-title"><span class="title">微信小程序项目</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/guide/" class="nav-link router-link-active">
  wxapp-music
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="面试宝典" class="dropdown-title"><span class="title">面试宝典</span> <span class="arrow down"></span></button> <button type="button" aria-label="面试宝典" class="mobile-dropdown-title"><span class="title">面试宝典</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/myblog/baodian/zero/" class="nav-link">
  初级开发篇
</a></li><li class="dropdown-item"><!----> <a href="/myblog/baodian/high/" class="nav-link">
  中高进阶篇
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="工具箱" class="dropdown-title"><span class="title">工具箱</span> <span class="arrow down"></span></button> <button type="button" aria-label="工具箱" class="mobile-dropdown-title"><span class="title">工具箱</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>
          在线编辑
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://tinypng.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  图片压缩
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          在线服务
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://www.aliyun.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://cloud.tencent.com/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  腾讯云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>
          博客指南
        </h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://juejin.im/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://blog.csdn.net/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  CSDN
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序端项目导学</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>后台管理系统项目导学</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>云开发与Serverless</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>项目代码结构初始化</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>小程序端项目开始</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/myblog/guide/notes/09.html" class="sidebar-link">轮播图组件 swiper</a></li><li><a href="/myblog/guide/notes/10.html" class="sidebar-link">组件化开发</a></li><li><a href="/myblog/guide/notes/11.html" class="sidebar-link">自定义歌单组件playlist</a></li><li><a href="/myblog/guide/notes/12.html" class="sidebar-link">自定义歌曲列表组件musiclist</a></li><li><a href="/myblog/guide/notes/13.html" aria-current="page" class="active sidebar-link">播放器页面player</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#播放器页面布局" class="sidebar-link">播放器页面布局</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#微信小程序中iconfont字体图标的使用" class="sidebar-link">微信小程序中iconfont字体图标的使用</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#音乐控制面板的实现" class="sidebar-link">音乐控制面板的实现</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#获取音乐的url接口" class="sidebar-link">获取音乐的url接口</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#wx-getbackgroundaudiomanager" class="sidebar-link">wx.getBackgroundAudioManager()</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#播放器的动态效果" class="sidebar-link">播放器的动态效果</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#上一首与下一首功能的实现" class="sidebar-link">上一首与下一首功能的实现</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#进度条组件progress-bar" class="sidebar-link">进度条组件progress-bar</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#进度条组件progress-bar布局" class="sidebar-link">进度条组件progress-bar布局</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#进度条与播放时间联动" class="sidebar-link">进度条与播放时间联动</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#拖拽进度条" class="sidebar-link">拖拽进度条</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#解决拖动进度条时的小bug" class="sidebar-link">解决拖动进度条时的小bug</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#自动播放下一首及性能优化" class="sidebar-link">自动播放下一首及性能优化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#子组件调用父组件的方法" class="sidebar-link">子组件调用父组件的方法</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#自定义歌词组件lyric" class="sidebar-link">自定义歌词组件lyric</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#唱片与歌词的切换" class="sidebar-link">唱片与歌词的切换</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#获取歌词的数据" class="sidebar-link">获取歌词的数据</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#歌词组件lyric的布局" class="sidebar-link">歌词组件lyric的布局</a></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#歌词与播放时间联动" class="sidebar-link">歌词与播放时间联动</a></li></ul></li><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#本章小结" class="sidebar-link">本章小结</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/myblog/guide/notes/13.html#本节收获" class="sidebar-link">本节收获</a></li></ul></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="播放器页面player"><a href="#播放器页面player" class="header-anchor">#</a> 播放器页面player</h1> <p>整个播放器页面用到两个组件：歌曲进度条组件progress-bar、歌词组件lyric</p> <h2 id="播放器页面布局"><a href="#播放器页面布局" class="header-anchor">#</a> 播放器页面布局</h2> <p>因为播放器页面需要用到音乐的详细信息，所以在页面跳转之前，我们需要获取到这些信息。因为之前获取过，为了节约性能，我们可以将数据存储在本地，从本地获取数据。</p> <p>这里可以用微信小程序自带的接口，<a href="https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html" target="_blank" rel="noopener noreferrer">wx.setStorageSync<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>,以下是在musiclist.js页面中：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>wx<span class="token punctuation">.</span><span class="token function">setStorageSync</span><span class="token punctuation">(</span><span class="token string">'musiclist'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>musicList<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>下面是播放器背景图片与遮罩层代码：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 播放器背景图片与遮罩层 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>player-container<span class="token punctuation">&quot;</span></span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token style language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>{{picUrl}}<span class="token punctuation">)</span></span> no-repeat center/cover</span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>player-mask<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.player-container</span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.5<span class="token punctuation">;</span>
  <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>30rpx<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.player-mask</span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #222<span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> -2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>音乐唱片部分代码：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 音乐唱片 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>player-info<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>player-disc {{isPlaying?<span class="token punctuation">'</span>play<span class="token punctuation">'</span>:<span class="token punctuation">'</span><span class="token punctuation">'</span>}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isLyricShow}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeLyricShow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>player-img <span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{picUrl}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img rotation {{isPlaying?<span class="token punctuation">'</span><span class="token punctuation">'</span>:<span class="token punctuation">'</span>rotation-paused<span class="token punctuation">'</span>}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.player-info</span><span class="token punctuation">{</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.player-disc</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 550rpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 550rpx<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://s3.music.126.net/mobile-new/img/disc.png?d3bdd1080a72129346aa0b4b4964b75f=<span class="token punctuation">)</span></span> no-repeat center/contain<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span>240rpx<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.player-disc::after</span><span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200rpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300rpx<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span>  <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>https://s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=<span class="token punctuation">)</span></span> no-repeat center/contain<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 47%<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> -180rpx<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-20deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> 40rpx 20rpx<span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> transform .5s ease<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.play.player-disc::after</span><span class="token punctuation">{</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>2deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.player-img</span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 334rpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 334rpx<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.rotation</span><span class="token punctuation">{</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> rotation 15s linear infinite <span class="token punctuation">;</span>
  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> rotation 15s linear infinite<span class="token punctuation">;</span>
  <span class="token property">-o-animation</span><span class="token punctuation">:</span> rotation 15s linear infinite <span class="token punctuation">;</span>
  <span class="token property">-moz-animation</span><span class="token punctuation">:</span> rotation 15s linear infinite <span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.rotation-paused</span><span class="token punctuation">{</span>
  <span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> rotation</span><span class="token punctuation">{</span>
  <span class="token selector">from</span><span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">to</span><span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>


<span class="token selector">.player-disc .img</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br></div></div><p>播放与暂停部分代码：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!--控制栏 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>control<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont icon-shangyishoushangyige<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onPrev<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont {{isPlaying?<span class="token punctuation">'</span>icon-zanting1<span class="token punctuation">'</span>:<span class="token punctuation">'</span>icon-bofang1<span class="token punctuation">'</span>}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeStatus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont icon-xiayigexiayishou<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onNext<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.control</span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span>0<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.iconfont</span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.icon-shangyishoushangyige,.icon-xiayigexiayishou</span><span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 80rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.icon-zanting1,.icon-bofang1</span><span class="token punctuation">{</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 120rpx<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 60rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><h3 id="微信小程序中iconfont字体图标的使用"><a href="#微信小程序中iconfont字体图标的使用" class="header-anchor">#</a> 微信小程序中iconfont字体图标的使用</h3> <p>在播放与暂停部分代码中，我使用到了iconfont字体图标，具体使用步骤如下：</p> <ul><li>打开<a href="https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2" target="_blank" rel="noopener noreferrer">iconfont<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>官网，选择登录，选一种自己喜欢的方式</li> <li>在搜索框中搜索想要的图标，点击添加进入购物车</li> <li>然后添加至项目，没有项目的可以新建一个</li> <li>在<code>资源管理</code>中选择<code>我的项目</code>，选择刚才创建的项目</li> <li>点击Font class，点击更新代码，复制链接到新的窗口打开，复制里面的代码</li></ul> <p>在小程序中引用：</p> <ul><li><p>在文件根目录中新建一个文件夹<code>iconfont.wxss</code>,将刚才拷贝的代码粘贴进去</p></li> <li><p>打开app.wxss,输入以下代码</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token atrule"><span class="token rule">@import</span> <span class="token string">&quot;iconfont.wxss&quot;</span><span class="token punctuation">;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li></ul> <p>现在就可以在全局使用字体小图标了，在使用的时候只要将对应图标的类名添加进标签的class中就可以了，前提是class中必须有一个iconfont类名，这是使用的前提。格式如下：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont icon-shangyishoushangyige<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onPrev<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="音乐控制面板的实现"><a href="#音乐控制面板的实现" class="header-anchor">#</a> 音乐控制面板的实现</h2> <h3 id="获取音乐的url接口"><a href="#获取音乐的url接口" class="header-anchor">#</a> 获取音乐的url接口</h3> <p>在云函数<code>music</code>中，添加以下代码：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token string">'lyric'</span><span class="token punctuation">,</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span>next</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">BASE_URL</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/lyric?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">ICODE</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>event<span class="token punctuation">.</span>musicId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> 
    ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> res<span class="token punctuation">.</span>data
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>调用接口,获取歌曲：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      name<span class="token operator">:</span><span class="token string">&quot;music&quot;</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span><span class="token punctuation">{</span>
        musicId<span class="token punctuation">,</span>
        $url<span class="token operator">:</span><span class="token string">'musicUrl'</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> result <span class="token operator">=</span> res<span class="token punctuation">.</span>result
      <span class="token comment">// console.log(result);</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>url <span class="token operator">==</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        wx<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          title<span class="token operator">:</span> <span class="token string">'无权限播放'</span><span class="token punctuation">,</span>
          icon<span class="token operator">:</span><span class="token string">'error'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">onNext</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span>
      <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="wx-getbackgroundaudiomanager"><a href="#wx-getbackgroundaudiomanager" class="header-anchor">#</a> wx.getBackgroundAudioManager()</h3> <p>获取<strong>全局唯一</strong>的背景音频管理器，详细参考<a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/wx.getBackgroundAudioManager.html" target="_blank" rel="noopener noreferrer">wx.getBackgroundAudioManager()<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> backgroundAudioManager <span class="token operator">=</span> wx<span class="token punctuation">.</span><span class="token function">getBackgroundAudioManager</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>有了这个音频管理器，我们就可以获取到歌曲的详细信息，并展示在微信开发者工具上。(具体使用方法可以参考<a href="https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html" target="_blank" rel="noopener noreferrer">BackgroundAudioManager实例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>)</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>backgroundAudioManager<span class="token punctuation">.</span>src <span class="token operator">=</span> result<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>url
<span class="token comment">// 歌曲名</span>
backgroundAudioManager<span class="token punctuation">.</span>title <span class="token operator">=</span> music<span class="token punctuation">.</span>name
<span class="token comment">// 歌手名</span>
backgroundAudioManager<span class="token punctuation">.</span>singer <span class="token operator">=</span> music<span class="token punctuation">.</span>ar<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>name
<span class="token comment">// 播放图片</span>
backgroundAudioManager<span class="token punctuation">.</span>coverImgUrl <span class="token operator">=</span> music<span class="token punctuation">.</span>al<span class="token punctuation">.</span>picUrl
<span class="token comment">// 专辑名称</span>
backgroundAudioManager<span class="token punctuation">.</span>epname <span class="token operator">=</span> music<span class="token punctuation">.</span>al<span class="token punctuation">.</span>name
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="播放器的动态效果"><a href="#播放器的动态效果" class="header-anchor">#</a> 播放器的动态效果</h2> <p>当音乐播放时，图标会变成播放按钮，唱片转动，并且指针放在唱片上。当音乐暂停时，图标变成暂停按钮，唱片停止转动，指针离开唱片。歌曲播放值为true，歌曲暂停值为false。</p> <p>我通过三元运算符控制图标的显示：</p> <p>暂停与播放切换：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont {{isPlaying?<span class="token punctuation">'</span>icon-zanting1<span class="token punctuation">'</span>:<span class="token punctuation">'</span>icon-bofang1<span class="token punctuation">'</span>}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeStatus<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>并且绑定<strong>changeStatus</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">changeStatus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>isPlaying<span class="token punctuation">)</span><span class="token punctuation">{</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">pause</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      isPlaying<span class="token operator">:</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>isPlaying
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>唱片的旋转动画以及暂停动画：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>image</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{picUrl}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>img rotation {{isPlaying?<span class="token punctuation">'</span><span class="token punctuation">'</span>:<span class="token punctuation">'</span>rotation-paused<span class="token punctuation">'</span>}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>image</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>指针的位置：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>player-disc {{isPlaying?<span class="token punctuation">'</span>play<span class="token punctuation">'</span>:<span class="token punctuation">'</span><span class="token punctuation">'</span>}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isLyricShow}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>changeLyricShow<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="上一首与下一首功能的实现"><a href="#上一首与下一首功能的实现" class="header-anchor">#</a> 上一首与下一首功能的实现</h3> <p>定义当前播放的索引nowPlayingIndex = 0，然后定义点击事件，分别是上一首onPrev()、下一首onNext()</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 点击切换上一首</span>
  <span class="token function">onPrev</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    nowPlayingIndex<span class="token operator">--</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>nowPlayingIndex <span class="token operator">&lt;</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      nowPlayingIndex <span class="token operator">=</span> musiclist<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">loadMusicDetail</span><span class="token punctuation">(</span>musiclist<span class="token punctuation">[</span>nowPlayingIndex<span class="token punctuation">]</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 点击切换下一首</span>
  <span class="token function">onNext</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    nowPlayingIndex<span class="token operator">++</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>nowPlayingIndex <span class="token operator">===</span> musiclist<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">{</span>
      nowPlayingIndex <span class="token operator">=</span> <span class="token number">0</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">loadMusicDetail</span><span class="token punctuation">(</span>musiclist<span class="token punctuation">[</span>nowPlayingIndex<span class="token punctuation">]</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h2 id="进度条组件progress-bar"><a href="#进度条组件progress-bar" class="header-anchor">#</a> 进度条组件progress-bar</h2> <p>在<code>component</code>文件夹中新建组件progress-bar,由三个部分组成，歌曲的时间、进度条上的小圆点、进度条。</p> <h3 id="进度条组件progress-bar布局"><a href="#进度条组件progress-bar布局" class="header-anchor">#</a> 进度条组件progress-bar布局</h3> <p>在小程序中，有自带的滑块效果标签，可以充当进度条上的小圆点。可参考<a href="https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html" target="_blank" rel="noopener noreferrer">movable-area<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>、<a href="https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html" target="_blank" rel="noopener noreferrer">movable-view<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <blockquote><p>movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。</p></blockquote> <p>在小程序中，有自带的进度条标签。具体可以参考<a href="https://developers.weixin.qq.com/miniprogram/dev/component/progress.html" target="_blank" rel="noopener noreferrer">progress<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>在data中分别定义：</p> <ul><li><strong>movableDis</strong>： 小圆点在x轴上移动的距离</li> <li><strong>progress</strong>：进度条移动的距离的百分比</li></ul> <p>progress-bar.wxml:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 当前时间 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>time<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{showTime.currentTime}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 进度条 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>control<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 进度条上的小圆点  滑块 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>movable-area</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>movable-area<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>movable-view</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>horizontal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">damping</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{movableDis}}<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>movable-view<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindchange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtouchend</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTouchEnd<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>movable-area</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 进度条的线 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>progress</span> <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2<span class="token punctuation">&quot;</span></span> <span class="token attr-name">backgroundColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#969696<span class="token punctuation">&quot;</span></span> <span class="token attr-name">activeColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#fff<span class="token punctuation">&quot;</span></span> <span class="token attr-name">percent</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{progress}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>progress</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token comment">&lt;!-- 总时间 --&gt;</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>time<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{showTime.totalTime}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>progress-bar.wxss:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.container</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.time</span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 26rpx<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> NotoSansHans-Regular<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.control</span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">flex</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 20rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.movable-area</span><span class="token punctuation">{</span>
  <span class="token comment">/* box-sizing: border-box; */</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 26rpx<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> -14rpx<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token comment">/* padding: 0 18rpx ; */</span>
<span class="token punctuation">}</span>
<span class="token selector">.movable-view</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 26rpx<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 26rpx<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> #fefefe<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br></div></div><p>进度条的移动距离是在x轴上的偏移量，而由于这里进度条的宽度设置的是百分比，每个手机对应宽度都是不同的，所以我们要获取当前手机的宽度，这里要使用小程序自带的api<a href="https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html" target="_blank" rel="noopener noreferrer">wx.createSelectorQuery()<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>，它会返回一个 <a href="https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html" target="_blank" rel="noopener noreferrer">SelectorQuery<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>对象实例，代码如下：</p> <blockquote><p>在自定义组件或包含自定义组件的页面中，应使用 <code>this.createSelectorQuery()</code> 来代替。</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 获取x轴上的偏移量</span>
    <span class="token function">getMovableDis</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">const</span> query <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">createSelectorQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      query<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'.movable-area'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">boundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      query<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string">'.movable-view'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">boundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      query<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span><span class="token parameter">rect</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        movableAreaWidth <span class="token operator">=</span> rect<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>width
        movableViewWidth <span class="token operator">=</span> rect<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>width
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>在ready生命周期函数中执行getMovableDis()。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>lifetimes<span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token function">ready</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getMovableDis</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">提示</p> <p>生命周期方法可以直接定义在 Component 构造器的第一级参数中。自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高），具体使用方法见<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html#%E5%AE%9A%E4%B9%89%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E6%96%B9%E6%B3%95" target="_blank" rel="noopener noreferrer">lifetimes<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></div> <p>编写bindBGMEvent()方法，通过backgroundAudioManager自带的方法，将一些操作写在这些方法中：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">bindBGMEvent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onPlay</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onPlay'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onStop</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log('onStop')</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onPause</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Pause'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onWaiting</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log('onWaiting')</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onCanplay</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log('onCanplay')</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onTimeUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token comment">// console.log('onTimeUpdate')</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onEnded</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(&quot;onEnded&quot;)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onError</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.error(res.errMsg)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><p>在<strong>backgroundAudioManager.onCanplay()</strong> 中获取当前音频的长度（单位：s），由于小程序自带bug，有时获取到的音频长度为undefined，不同的机型发生的概率不同，为了避免这个bug的发生，我们在获取音频长度之前做个判断，由<strong>setTime()方法</strong> 获取当前音频的长度，<strong>dateFormat()方法</strong> 用来将获取到的长度转化成“00：00”的格式，<strong>parseZero()方法</strong> 用于对小于10的数字进行补零：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onCanplay</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log('onCanplay')</span>
        <span class="token comment">// console.log(backgroundAudioManager.duration);</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> backgroundAudioManager<span class="token punctuation">.</span>duration <span class="token operator">!=</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
          <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">setTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      duration <span class="token operator">=</span> backgroundAudioManager<span class="token punctuation">.</span>duration
      <span class="token keyword">const</span> durationFmt <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span>duration<span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        <span class="token punctuation">[</span><span class="token string">'showTime.totalTime'</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>durationFmt<span class="token punctuation">.</span>min<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>durationFmt<span class="token punctuation">.</span>sec<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 格式化总时长j</span>
    <span class="token function">dateFormat</span><span class="token punctuation">(</span><span class="token parameter">sec</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">const</span> min <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>sec <span class="token operator">/</span> <span class="token number">60</span><span class="token punctuation">)</span>
      sec <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>sec <span class="token operator">%</span> <span class="token number">60</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        <span class="token string">'min'</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">parseZero</span><span class="token punctuation">(</span>min<span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token string">'sec'</span><span class="token operator">:</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">parseZero</span><span class="token punctuation">(</span>sec<span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 补零</span>
    <span class="token function">parseZero</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> num <span class="token operator">&lt;</span> <span class="token number">10</span> <span class="token operator">?</span> <span class="token string">'0'</span> <span class="token operator">+</span> num <span class="token operator">:</span> num
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>此时总时间就可以显示在页面中了。</p> <h3 id="进度条与播放时间联动"><a href="#进度条与播放时间联动" class="header-anchor">#</a> 进度条与播放时间联动</h3> <p>要想实现进度条与播放时间联动，我们需要在音乐播放的过程中(也就是时间不断的更新中)，实现这个效果，我们可以在<strong>backgroundAudioManager.onTimeUpdate()</strong> 中编写相应的代码。我们通过<strong>backgroundAudioManager.currentTime</strong>获取音乐当前的时间，然后再对其进行格式化，就可以实时显示音乐当前的播放时间。而随着播放时间的变化，进度条上的小圆点和进度条的颜色也要随着变化：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onTimeUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token comment">// console.log('onTimeUpdate')</span>
        <span class="token keyword">const</span> currentTime <span class="token operator">=</span> backgroundAudioManager<span class="token punctuation">.</span>currentTime
        
        <span class="token keyword">const</span> duration <span class="token operator">=</span> backgroundAudioManager<span class="token punctuation">.</span>duration
        <span class="token keyword">const</span> sec <span class="token operator">=</span> currentTime<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
        <span class="token keyword">const</span> currentTimeFmt <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span>currentTime<span class="token punctuation">)</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            movableDis<span class="token operator">:</span><span class="token punctuation">(</span>movableAreaWidth <span class="token operator">-</span> movableViewWidth<span class="token punctuation">)</span> <span class="token operator">*</span> currentTime <span class="token operator">/</span> duration<span class="token punctuation">,</span>
            progress<span class="token operator">:</span>currentTime <span class="token operator">/</span> duration <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">,</span>
            <span class="token punctuation">[</span><span class="token string">'showTime.currentTime'</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>currentTimeFmt<span class="token punctuation">.</span>min<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>currentTimeFmt<span class="token punctuation">.</span>sec<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><details class="custom-block details"><summary>对获取当前时间backgroundAudioManager.currentTime进行优化</summary> <p>由于backgroundAudioManager.currentTime在一秒内会触发很多次，而歌词时间的变化是一秒一秒的改变，所以我们需要通过判断来优化当前代码：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>        <span class="token keyword">const</span> currentTime <span class="token operator">=</span> backgroundAudioManager<span class="token punctuation">.</span>currentTime
        
        <span class="token keyword">const</span> duration <span class="token operator">=</span> backgroundAudioManager<span class="token punctuation">.</span>duration
        <span class="token keyword">const</span> sec <span class="token operator">=</span> currentTime<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>currentSec <span class="token operator">!=</span> sec<span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token comment">// console.log(currentTime);</span>
          <span class="token keyword">const</span> currentTimeFmt <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span>currentTime<span class="token punctuation">)</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            movableDis<span class="token operator">:</span><span class="token punctuation">(</span>movableAreaWidth <span class="token operator">-</span> movableViewWidth<span class="token punctuation">)</span> <span class="token operator">*</span> currentTime <span class="token operator">/</span> duration<span class="token punctuation">,</span>
            progress<span class="token operator">:</span>currentTime <span class="token operator">/</span> duration <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">,</span>
            <span class="token punctuation">[</span><span class="token string">'showTime.currentTime'</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>currentTimeFmt<span class="token punctuation">.</span>min<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>currentTimeFmt<span class="token punctuation">.</span>sec<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
          currentSec <span class="token operator">=</span> sec
        <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div></details> <h3 id="拖拽进度条"><a href="#拖拽进度条" class="header-anchor">#</a> 拖拽进度条</h3> <p>在movable-view中，当用户拖动时会触发<strong>bindchange事件</strong>，当拖动结束时会触发<strong>bindtouchend事件</strong>。当拖动完成时，小圆点会停在那里，同时进度条也会跟随着变化，背景歌曲的进度也会改变，这里可以调用<strong>backgroundAudioManager.seek</strong>来设置背景音乐的播放位置：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>movable-view</span> <span class="token attr-name">direction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>horizontal<span class="token punctuation">&quot;</span></span> <span class="token attr-name">damping</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1000<span class="token punctuation">&quot;</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{movableDis}}<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>movable-view<span class="token punctuation">&quot;</span></span>
              <span class="token attr-name">bindchange</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onChange<span class="token punctuation">&quot;</span></span> <span class="token attr-name">bindtouchend</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>onTouchEnd<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token comment">// console.log(event);</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>source <span class="token operator">==</span> <span class="token string">'touch'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>progress <span class="token operator">=</span> event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>x <span class="token operator">/</span> <span class="token punctuation">(</span>movableAreaWidth<span class="token operator">-</span>movableViewWidth<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>movableDis <span class="token operator">=</span>  event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>x
      <span class="token punctuation">}</span>
      
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">onTouchEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">const</span> currentTimeFmt <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>backgroundAudioManager<span class="token punctuation">.</span>currentTime<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        progress<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>progress<span class="token punctuation">,</span>
        movableDis<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>movableDis<span class="token punctuation">,</span>
        <span class="token punctuation">[</span><span class="token string">'showTime.currentTime'</span><span class="token punctuation">]</span><span class="token operator">:</span> currentTimeFmt<span class="token punctuation">.</span>min <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> currentTimeFmt<span class="token punctuation">.</span>sec
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">seek</span><span class="token punctuation">(</span>duration <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>progress <span class="token operator">/</span> <span class="token number">100</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h3 id="解决拖动进度条时的小bug"><a href="#解决拖动进度条时的小bug" class="header-anchor">#</a> 解决拖动进度条时的小bug</h3> <p>当拖动进度条时，如果没有松手，那么<strong>onTouchEnd()</strong> 事件会与 <strong>backgroundAudioManager.onTimeUpdate()</strong> 同时触发，而这两个事件都会给<strong>movableDis</strong>、<strong>progress</strong>和 <strong>['showTime.currentTime']</strong>  设置值会冲突，这就会出现小圆点闪烁的bug。我们可以设置一个变量或者说是一个锁，来控制当拖拽时只能有一个起作用。以下为优化后的代码：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> isMoving <span class="token operator">=</span> <span class="token boolean">false</span>  <span class="token comment">//优化</span>
<span class="token function">onChange</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token comment">// console.log(event);</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>source <span class="token operator">==</span> <span class="token string">'touch'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>progress <span class="token operator">=</span> event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>x <span class="token operator">/</span> <span class="token punctuation">(</span>movableAreaWidth<span class="token operator">-</span>movableViewWidth<span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>movableDis <span class="token operator">=</span>  event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>x
        isMoving <span class="token operator">=</span> <span class="token boolean">true</span>  <span class="token comment">//优化</span>
      <span class="token punctuation">}</span>
      
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">onTouchEnd</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">const</span> currentTimeFmt <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>backgroundAudioManager<span class="token punctuation">.</span>currentTime<span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        progress<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>progress<span class="token punctuation">,</span>
        movableDis<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>movableDis<span class="token punctuation">,</span>
        <span class="token punctuation">[</span><span class="token string">'showTime.currentTime'</span><span class="token punctuation">]</span><span class="token operator">:</span> currentTimeFmt<span class="token punctuation">.</span>min <span class="token operator">+</span> <span class="token string">':'</span> <span class="token operator">+</span> currentTimeFmt<span class="token punctuation">.</span>sec
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      backgroundAudioManager<span class="token punctuation">.</span><span class="token function">seek</span><span class="token punctuation">(</span>duration <span class="token operator">*</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>progress <span class="token operator">/</span> <span class="token number">100</span><span class="token punctuation">)</span>
      isMoving <span class="token operator">=</span> <span class="token boolean">false</span>  <span class="token comment">//优化</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code>backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onTimeUpdate</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>isMoving<span class="token punctuation">)</span><span class="token punctuation">{</span>  <span class="token comment">//优化</span>
          <span class="token comment">// console.log('onTimeUpdate')</span>
        <span class="token keyword">const</span> currentTime <span class="token operator">=</span> backgroundAudioManager<span class="token punctuation">.</span>currentTime
        
        <span class="token keyword">const</span> duration <span class="token operator">=</span> backgroundAudioManager<span class="token punctuation">.</span>duration
        <span class="token keyword">const</span> sec <span class="token operator">=</span> currentTime<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>currentSec <span class="token operator">!=</span> sec<span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token comment">// console.log(currentTime);</span>
          <span class="token keyword">const</span> currentTimeFmt <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">dateFormat</span><span class="token punctuation">(</span>currentTime<span class="token punctuation">)</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            movableDis<span class="token operator">:</span><span class="token punctuation">(</span>movableAreaWidth <span class="token operator">-</span> movableViewWidth<span class="token punctuation">)</span> <span class="token operator">*</span> currentTime <span class="token operator">/</span> duration<span class="token punctuation">,</span>
            progress<span class="token operator">:</span>currentTime <span class="token operator">/</span> duration <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">,</span>
            <span class="token punctuation">[</span><span class="token string">'showTime.currentTime'</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>currentTimeFmt<span class="token punctuation">.</span>min<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>currentTimeFmt<span class="token punctuation">.</span>sec<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
       <span class="token punctuation">}</span>
     <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>通过isMoving的true或者false来控制执行哪一个方法。</p> <p>优化完上面的代码后，还有小概率发生另一个bug，就是当触发完<strong>backgroundAudioManager.onEnded()</strong> 之后还有小概率触发<strong>onChange()</strong> 事件<strong>isMoving</strong>又重新被赋值成true，此时<strong>backgroundAudioManager.onTimeUpdate()</strong> 就会一直不执行，这时我们就需要在<strong>backgroundAudioManager.onPlay()</strong> 中重新给<strong>isMoving</strong>赋值false</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onPlay</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onPlay'</span><span class="token punctuation">)</span>
        isMoving <span class="token operator">=</span> <span class="token boolean">false</span>  <span class="token comment">//优化</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="自动播放下一首及性能优化"><a href="#自动播放下一首及性能优化" class="header-anchor">#</a> 自动播放下一首及性能优化</h2> <p>当一首歌播放结束后，应该有自动跳转到下一首歌的效果。在player.wxml中有onNext的方法就可以实现这效果，所以我们只需要在progress-bar组件的<strong>backgroundAudioManager.onEnded</strong>中调用到这个方法，就可以实现自动播放下一首的功能。</p> <h3 id="子组件调用父组件的方法"><a href="#子组件调用父组件的方法" class="header-anchor">#</a> 子组件调用父组件的方法</h3> <ul><li><p>在子组件中可以抛出一个事件给父元素,或者说是激活一个事件。写法：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> backgroundAudioManager<span class="token punctuation">.</span><span class="token function">onEnded</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// console.log(&quot;onEnded&quot;)</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">'musicEnd'</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div></li> <li><p>然后在父组件中用<strong>bind:musicEnd=&quot;onNext&quot;</strong> 的方式触发onNext</p></li></ul> <h2 id="自定义歌词组件lyric"><a href="#自定义歌词组件lyric" class="header-anchor">#</a> 自定义歌词组件lyric</h2> <p>在<code>component</code>文件夹中新建组件lyric</p> <h3 id="唱片与歌词的切换"><a href="#唱片与歌词的切换" class="header-anchor">#</a> 唱片与歌词的切换</h3> <p>定义一个<strong>isLyricShow:false</strong>，用来控制显示与隐藏。为音乐唱片与歌词组件绑定事件<strong>changeLyricShow</strong>：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">changeLyricShow</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      isLyricShow<span class="token operator">:</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>isLyricShow
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>用 <strong>hidden= &quot;  &quot;</strong> 控制显示与隐藏。</p> <div class="custom-block tip"><p class="custom-block-title">wx:if vs hidden</p> <p>wx:if适用于不频繁的切换，而hidden适用于频繁的切换。具体的差别可以参考<a href="https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html#wx:if%20vs%20hidden" target="_blank" rel="noopener noreferrer"><code>wx:if</code> vs <code>hidden</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></div> <h3 id="获取歌词的数据"><a href="#获取歌词的数据" class="header-anchor">#</a> 获取歌词的数据</h3> <p>在music云函数中，添加以下代码：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>app<span class="token punctuation">.</span><span class="token function">router</span><span class="token punctuation">(</span><span class="token string">'lyric'</span><span class="token punctuation">,</span><span class="token keyword">async</span><span class="token punctuation">(</span><span class="token parameter">ctx<span class="token punctuation">,</span>next</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> res <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">BASE_URL</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/lyric?</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token constant">ICODE</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">&amp;id=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>event<span class="token punctuation">.</span>musicId<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span> 
    ctx<span class="token punctuation">.</span>body <span class="token operator">=</span> res<span class="token punctuation">.</span>data
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>在player.js中，我在获取歌曲url成功的回调函数中，编写请求歌词的代码：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token comment">// 加载歌词</span>
      wx<span class="token punctuation">.</span>cloud<span class="token punctuation">.</span><span class="token function">callFunction</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        name<span class="token operator">:</span><span class="token string">'music'</span><span class="token punctuation">,</span>
        data<span class="token operator">:</span><span class="token punctuation">{</span>
          musicId<span class="token punctuation">,</span>
          $url<span class="token operator">:</span><span class="token string">'lyric'</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">let</span> lyric <span class="token operator">=</span> <span class="token string">'暂无歌词'</span>
        <span class="token keyword">const</span> lrc <span class="token operator">=</span> res<span class="token punctuation">.</span>result<span class="token punctuation">.</span>lrc
        <span class="token keyword">if</span><span class="token punctuation">(</span>lrc<span class="token punctuation">)</span><span class="token punctuation">{</span>
          lyric <span class="token operator">=</span> lrc<span class="token punctuation">.</span>lyric
        <span class="token punctuation">}</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          lyric
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>然后在lyric组件中接收lyric(歌词数据)：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> properties<span class="token operator">:</span> <span class="token punctuation">{</span>
    lyric<span class="token operator">:</span>String
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>获取过来的lyric数组需要解析，定义_parseLyric()方法：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 解析歌词</span>
    <span class="token function">_parseLyric</span><span class="token punctuation">(</span><span class="token parameter">sLyric</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">let</span> line <span class="token operator">=</span> sLyric<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
      <span class="token keyword">let</span> _lrcList <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
      <span class="token comment">// console.log(line);</span>
      line<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">element</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> time <span class="token operator">=</span> element<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span>
        
        <span class="token keyword">if</span><span class="token punctuation">(</span>time <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token comment">// console.log(time);</span>
          <span class="token keyword">let</span> lrc <span class="token operator">=</span> element<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span>time<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
          <span class="token comment">// console.log(lrc);</span>
          <span class="token keyword">let</span> timeReg <span class="token operator">=</span> time<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(\d{2,}):(\d{2})(?:\.(\d{2,3}))?</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span>
          <span class="token comment">// console.log(timeReg);</span>
          <span class="token comment">// 将时间转化成秒</span>
          <span class="token keyword">let</span> time2Second <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>timeReg<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">+</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>timeReg<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>timeReg<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">1000</span>
          <span class="token comment">// console.log(time2Second);</span>
          _lrcList<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            lrc<span class="token punctuation">,</span>
            time<span class="token operator">:</span>time2Second
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        lrcList<span class="token operator">:</span>_lrcList
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token comment">// console.log(_lrcList);</span>
    <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br></div></div><p>获取完成之后，就可以渲染在页面中了。</p> <h3 id="歌词组件lyric的布局"><a href="#歌词组件lyric的布局" class="header-anchor">#</a> 歌词组件lyric的布局</h3> <p>lyric.wxml:</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>scroll-view</span> <span class="token attr-name">hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{isLyricShow}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lyric-scroll<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-y</span> <span class="token attr-name">scroll-top</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{scrollTop}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scroll-with-animation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lyric-panel<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>block</span> <span class="token attr-name"><span class="token namespace">wx:</span>for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{{lrcList}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name"><span class="token namespace">wx:</span>key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>lyric {{index==nowLyricIndex?<span class="token punctuation">'</span>highlight-lyric<span class="token punctuation">'</span>:<span class="token punctuation">'</span><span class="token punctuation">'</span>}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{item.lrc}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>block</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>scroll-view</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>lyric.wxss:</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.lyric-scroll</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 65%<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 34rpx<span class="token punctuation">;</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span>50rpx <span class="token punctuation">;</span>
  <span class="token property">padding-bottom</span><span class="token punctuation">:</span>15rpx <span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.lyric-panel</span><span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.lyric</span><span class="token punctuation">{</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 64rpx<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.highlight-lyric</span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #d43c33<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><h3 id="歌词与播放时间联动"><a href="#歌词与播放时间联动" class="header-anchor">#</a> 歌词与播放时间联动</h3> <p>这里要用到progress-bar组件里面获取到的currentTime,抛出timeupdata，在父组件里面接收bind:timeupdata=&quot;timeupdata&quot;</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">triggerEvent</span><span class="token punctuation">(</span><span class="token string">'timeupdata'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>
            currentTime
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>在player.js中,定义timeupdata方法：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token function">timeupdata</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token comment">// console.log(event);</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">selectComponent</span><span class="token punctuation">(</span><span class="token string">&quot;.lyric&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">updata</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>currentTime<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>在lyric组件中：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">updata</span><span class="token punctuation">(</span><span class="token parameter">currentTime</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>currentTime<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">let</span> lrcList <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>lrcList
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lrcList<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>lrcList<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">if</span><span class="token punctuation">(</span>currentTime <span class="token operator">&gt;</span> lrcList<span class="token punctuation">[</span>lrcList<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>time<span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>data<span class="token punctuation">.</span>nowLyricIndex <span class="token operator">!=</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            nowLyricIndex<span class="token operator">:</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
            scrollTop<span class="token operator">:</span>lrcList<span class="token punctuation">.</span>length <span class="token operator">*</span> lyricHeight
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
      <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>i <span class="token operator">&lt;</span> lrcList<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>currentTime <span class="token operator">&lt;=</span> lrcList<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>time<span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            nowLyricIndex<span class="token operator">:</span>i<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
            scrollTop<span class="token operator">:</span><span class="token punctuation">(</span> i <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token operator">*</span> lyricHeight
          <span class="token punctuation">}</span><span class="token punctuation">)</span>
          <span class="token keyword">break</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br></div></div><h2 id="本章小结"><a href="#本章小结" class="header-anchor">#</a> 本章小结</h2> <h3 id="本节收获"><a href="#本节收获" class="header-anchor">#</a> 本节收获</h3> <ul><li>进度条组件 progress-bar</li> <li>歌词组件lyric</li> <li>组件生命周期</li> <li>组件间通信与事件</li> <li>BackgroundAudioManager实例</li> <li>性能优化</li> <li>全局数据</li> <li>引入iconfont</li></ul></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/myblog/guide/notes/12.html" class="prev">
        自定义歌曲列表组件musiclist
      </a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/myblog/assets/js/app.5e430372.js" defer></script><script src="/myblog/assets/js/2.4f8c3bb6.js" defer></script><script src="/myblog/assets/js/21.f5ff3b18.js" defer></script>
  </body>
</html>
